<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻详情</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="/static/css/animate.css" th:href="@{/css/animate.css}">
    <link rel="stylesheet" href="/static/css/animate.compat.css" th:href="@{/animate.compat.css}">
    <link rel="stylesheet" href="/static/css/typo.css" th:href="@{/css/typo.css}">

    <link rel="stylesheet" href="/static/css/me.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" href="/static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">

   
</head>
<body>
    <!-- 导航 -->
    <nav th:replace="_fragments :: menu(1)" id="top" class="ui secondary attached m-opacity-mid segment m-mini m-shadow animated fadeInDown">
        <div class=" ui container">
            <div class="ui secondary stackable menu">
                <h1 class="ui violet header item">WIDS</h1>
                    <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 首页</a>
                    <a href="#" class="m-item item m-mobile-hide"><i class="folder icon"></i> 分类</a>
                    <a href="#" class="m-item item m-mobile-hide"><i class="window close outline icon"></i> 归档</a>
                    <a href="#" class="m-item item m-mobile-hide"> <i class="tags icon"></i>标签</a>
                    <a href="#" class="m-item item m-mobile-hide"><i class="question circle outline icon"></i> 关于 WIDS</a>

                    <div class="right item m-mobile-hide">
                        <div class="ui icon transparent input">
                            <input type="text" placeholder="Search...">
                            <i class="search link icon"></i>
                        </div>
                    </div>
            </div>

            <a href="" class="ui menu toggle blue icon button m-right-top m-mobile-show">
                <i class="sidebar icon">

                </i>
            </a>

        </div>


    </nav>
    <!-- 中间内容 -->
    <main class="m-large m-container-small animated fadeInUp">
        <div class="ui container">
            <div class="ui segment top attached">
                <div class="ui  horizontal link list ">
                    <div class="item">
                    <img src="/static/images/cg1.png" alt="" th:src="@{${user.avatarpc}}" class="ui avatar image img-tiny">
                    <div class="content">
                        <a href="" class=" header" th:text="${user.nickName}">张宇</a>
                    </div>
                    </div>
                    <div class="item ">
                        <i class="calendar icon" ></i><span th:text="${#dates.format(news.updateTime,'yyyy-MM-dd')}">2020-8-9</span>
                    </div>
                    <div class="item">
                        <i class="eye icon" ></i> <span th:text="${news.views}">1232</span>
                    </div>
                
            </div> 

            </div>
<!--            <div class="ui attached  segment">-->
<!--                &lt;!&ndash; 图片区域 &ndash;&gt;-->
<!--                <img src="/static/images/cg1.png" th:src="@{${news.firstPicture}}" alt="" class="ui fluid image rounded">-->
<!--            </div>-->
            <div class="ui  attached padded segment">
                <!-- 内容 -->
                <div class="ui right aligned basic segment">
                    <div class="ui label blue basic" th:text="${news.typename}"></div>
                    
                </div>
                <h2 class="ui center aligned header" th:text="${news.title}"></h2>

<!--         中间主要内容       -->
                <div id="content" class="typo js-toc-content typo-selection content m-padded-lr m-massive" th:utext="${news.content}">
                  <h2 id="section1">一、关于 <i class="serif">Typo.css</i></h2>

<p><i class="serif">Typo.css</i> 的目的是，在一致化浏览器排版效果的同时，构建最适合中文阅读的网页排版。</p>
<h4>现状和如何去做：</h4>

<p class="typo-first">排版是一个麻烦的问题 <sup><a href="#appendix1"># 附录一</a></sup>，需要精心设计，而这个设计却是常被视觉设计师所忽略的。前端工程师更常看到这样的问题，但不便变更。因为在多个 OS 中的不同浏览器渲染不同，改动需要多的时间做回归测试，所以改变变得更困难。而像我们一般使用的
  Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都没有很好地考虑中文排版。<i class="serif">Typo.css</i> 要做的就是解决中文排版的问题。</p>

<p><strong><i class="serif">Typo.css</i> 测试于如下平台：</strong></p>
<table summary="Typo.css 的测试平台列表">
  <thead>
  <tr>
    <th>OS/浏览器</th>
    <th>Firefox</th>
    <th>Chrome</th>
    <th>Safari</th>
    <th>Opera</th>
    <th>IE9</th>
    <th>IE8</th>
    <th>IE7</th>
    <th>IE6</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>OS X</td>
    <td>✔</td>
    <td>✔</td>
    <td>✔</td>
    <td>✔</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
  </tr>
  <tr>
    <td>Win 7</td>
    <td>✔</td>
    <td>✔</td>
    <td>✔</td>
    <td>✔</td>
    <td>✔</td>
    <td>✔</td>
    <td>✔</td>
    <td>-</td>
  </tr>
  <tr>
    <td>Win XP</td>
    <td>✔</td>
    <td>✔</td>
    <td>✔</td>
    <td>✔</td>
    <td>-</td>
    <td>✔</td>
    <td>✔</td>
    <td>✔</td>
  </tr>
  <tr>
    <td>Ubuntu</td>
    <td>✔</td>
    <td>✔</td>
    <td>-</td>
    <td>✔</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
  </tr>
  </tbody>
</table>

<h4 >中文排版的重点和难点</h4>

<p>在中文排版中，HTML4 的很多标准在语义在都有照顾到。但从视觉效果上，却很难利用单独的 CSS 来实现，像<abbr title="在文字下多加一个点">着重号</abbr>（例：这里<em class="typo-em">强调一下</em>）。在 HTML4 中，专名号标签（<code>&lt;u&gt;</code>）已经被放弃，而
  HTML5 被<a href="http://html5doctor.com/u-element/">重新提起</a>。<i class="serif">Typo.css</i> 也根据实际情况提供相应的方案。我们重要要注意的两点是：</p>
<ol>
  <li>语义：语义对应的用法和样式是否与中文排版一致</li>
  <li>表现：在各浏览器中的字体、大小和缩放是否如排版预期</li>
</ol>
<p>对于这些，<i class="serif">Typo.css</i> 排版项目的中文偏重注意点，都添加在附录中，详见：</p>
<blockquote>
  <b>附录一</b>：<a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重点</a>
</blockquote>

<p>目前已有像百姓网等全面使用 <i class="serif">Typo.css</i> 的项目，测试平台的覆盖，特别是在<abbr title="手机、平板电脑等移动平台">移动端</abbr>上还没有覆盖完主流平台，希望有能力的同学能加入测试行列，或者加入到 <i class="serif">Typo.css</i>
  的开发。加入方法：<a href="https://github.com/sofish/Typo.css">参与 <i class="serif">Typo.css</i> 开发</a>。如有批评、建议和意见，也随时欢迎给在 Github 直接提 <a
    href="https://github.com/sofish/Typo.css/issues">issues</a>，或给<abbr title="Sofish Lin, author of Typo.css"
                                                                        role="author">我</abbr>发<a
    href="mailto:sofish@icloud.com">邮件</a>。</p>

                </div>

                <!-- 标签 -->
                <div>
                    <div class="ui blue tag label " th:each="tag : ${news.tags}" th:text="${tag.name}">
                        sad
                    </div>
                   
                </div>

                <!-- 赞赏 -->
                <div class="ui basic segment "  th:if="${news.appreciation}">
                    <h3>喜欢的话，打赏一下呗</h3>
                    <div class="ui move right reveal">
                        <div class="visible content">
                          <img src="/static/images/zan.jpg"  th:src="@{/images/zan.jpg}" class="ui small image">
                        </div>
                        <div class="hidden content">
                          <img src="/static/images/pay1.png" th:src="@{/images/pay1.png}" class="ui small image">
                        </div>
                      </div>
                </div>
                  
                
            </div>
            <div class="ui attached message">
                
                <!-- 作者信息 -->
                <div class="ui middle aligned grid">
                    <div class="eleven wide column">
                        <ul class="list">
                            <li>作者：<span th:text="${user.nickName}"></span> </li>
                            <li>发布时间: <span th:text="${#dates.format(news.updateTime,'yyyy-MM-dd')}"></span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="ui bottom attached segment" th:if="${news.comment}">
                <!-- 留言区 -->
                <div id="comment-container" class="ui blue segment" >
                    <div th:fragment="commentList">
                    <div class="ui threaded comments" style="max-width: 100%;" >
                        <h3 class="ui dividing header">评论</h3>

                        <div class="comment" th:each="comment : ${comments}">
                          <a class="avatar">
                            <img src="/static/images/tx2.jpg" th:src="@{${comment.avatar}}">
                          </a>
                          <div class="content">
                            <a class="author" th:text="${comment.nickname}">Joe Henderson</a>
                            <div class="metadata">
                              <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">5 天以前</span>
                            </div>
                            <div class="text" th:text="${comment.content}">老兄，这太棒了。非常感谢。 </div>
                            <div class="actions">
                              <a class="reply" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" data-commentid="1" data-commentnickname="Matt" onclick="reply(this)">回复</a>
                            </div>
                          </div>
                            <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
                                <div class="comment" th:each="reply : ${comment.replyComments}">
                                    <a class="avatar">
                                        <img src="/static/images/tx2.jpg" th:src="@{${reply.avatar}}">
                                    </a>
                                    <div class="content">
                                        <a class="author" >
                                            <span th:text="${reply.nickname}">小红</span>
                                            &nbsp;<span th:text="|@ ${reply.parentComment.nickname}|" class="m-teal">@ 小白</span>
                                        </a>
                                        <div class="metadata">
                                            <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">5 天以前</span>
                                        </div>
                                        <div class="text" th:text="${reply.content}">老兄，这太棒了。非常感谢。 </div>
                                        <div class="actions">
                                            <a class="reply" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" data-commentid="1" data-commentnickname="Matt" onclick="reply(this)">回复</a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!--/*-->
                        <div class="comment">
                            <a class="avatar">
                                <img src="/static/images/tx3.jpg">
                            </a>
                            <div class="content">
                                <a class="author">Matt</a>
                                <div class="metadata">
                                    <span class="date">今天下午 5:42</span>
                                </div>
                                <div class="text">太赞了！ </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="/static/images/tx1.jpg">
                            </a>
                            <div class="content">
                                <a class="author">Elliot Fu</a>
                                <div class="metadata">
                                    <span class="date">昨天上午12:30</span>
                                </div>
                                <div class="text">
                                    <p>這對我的研究是非常有用.謝謝!</p>
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                        </div>
                        <div class="comments">
                            <div class="comment">
                                <a class="avatar">
                                    <img src="/static/images/tx2.jpg">
                                </a>
                                <div class="content">
                                    <a class="author">Jenny Hess</a>
                                    <div class="metadata">
                                        <span class="date">刚刚</span>
                                    </div>
                                    <div class="text">艾略特你永远是多么正确 :) </div>
                                    <div class="actions">
                                        <a class="reply">回复</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--*/-->
                    </div>
                    </div>
                </div>

                    <div id="comment-form" class="ui form m-large">
                    <input type="hidden" name="news.id" th:value="${news.id}">
                    <input type="hidden" name="parentComment.id" value="-1">
                    <div class="field">
                        <textarea name="content" placeholder="请输入评论。。"></textarea>
                    </div>
                
                <div class="fields">
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                    <input type="text" name="nickName" placeholder="姓名">
                </div>
                </div>
                <div class="field">
                    <div class="ui left icon input">
                            <i class="envelope icon"></i>
                    <input type="text" name="email" placeholder="邮箱">
                </div>
                </div>
                <div class="field">
                    <button id="commentpost-btn" type="button" class="ui blue button">发布</button>
                </div>
                </div>
            </div>

                </div>

            </div>
        </div>



    </main>
    
    <div class="m-tiny m-fixed m-right-bottom">
    <div class="ui vertical icon buttons ">
      <button type="button" class="ui toc blue button">目录</button>
      <a href="#comment-container" class="ui blue button">留言</a>
      <a href="#top" class="ui blue button">
        <i class="chevron up icon"></i>
      </a>
    </div>
</div>
      <div class="ui top-container flowing popup transition hidden"
      style="width: 240px !important;"
      >
        
        <ol class="js-toc">

        </ol>
      </div>



    <!-- 底部 -->
    <footer th:replace="_fragments :: footer" class="ui secondary m-opacity-mid vertical segment m-massive m-shadow">



    </footer>

    <!--/*/<th:block th:replace="_fragments :: script">/*/-->
    <script src="/static/js/jquery-3.4.1.min.js"></script>
    <script src="/static/lib/tocbot/tocbot.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <!--/*/</th:block>/*/-->


    <script th:inline="javascript">
 tocbot.init({
  // Where to render the table of contents.
  tocSelector: '.js-toc',
  // Where to grab the headings to build the table of contents.
  contentSelector: '.js-toc-content',
  // Which headings to grab inside of the contentSelector element.
  headingSelector: 'h1, h2, h3',
  // For headings inside relative or absolute positioned containers within content.
  hasInnerContainers: true,
});


        $('.menu.toggle').click(function(){
            $('.m-item').toggleClass('m-mobile-hide');

        });
        $('.toc.button').popup({
          popup : $('.top-container.popup'),
          on:'click',
          position: 'left center'
        });
 //评论表单验证
 $('.ui.form').form({
     fields: {
         title: {
             identifier: 'content',
             rules: [{
                 type: 'empty',
                 prompt: '请输入评论内容'
             }
             ]
         },
         content: {
             identifier: 'nickname',
             rules: [{
                 type: 'empty',
                 prompt: '请输入你的大名'
             }]
         },
         type: {
             identifier: 'email',
             rules: [{
                 type: 'email',
                 prompt: '请填写正确的邮箱地址'
             }]
         }
     }
 });
    $(function () {
     $("#comment-container").load(/*[[@{/comments/{id}(id=${news.id})}]]*/"comments/6");
    });

        $('#commentpost-btn').click(function () {
            var boo = $('.ui.form').form('validate form');
            if (boo) {
                console.log('校验成功');
                postData();
            } else {
                console.log('校验失败');
            }

        });

 function postData() {
     $("#comment-container").load(/*[[@{/comments}]]*/"",{
         "parentComment.id" : $("[name='parentComment.id']").val(),
         "news.id" : $("[name='news.id']").val(),
         "nickname": $("[name='nickname']").val(),
         "email"   : $("[name='email']").val(),
         "content" : $("[name='content']").val()
     },function (responseTxt, statusTxt, xhr) {
//        $(window).scrollTo($('#comment-container'),500);
         clearContent();
     });
    }
        function clearContent() {
     $("[name='content']").val('');
     $("[name='parentComment.id']").val(-1);
     $("[name='content']").attr("placeholder", "请输入评论信息...");
    }


        function reply(obj) {
     var commentId = $(obj).data('commentid');
     var commentNickname = $(obj).data('commentnickname');
     $("[name='content']").attr("placeholder", "@"+commentNickname).focus();
     $("[name='parentComment.id']").val(commentId);
     $(window).scrollTo($('#comment-form'),500);
        }

    </script>
   

</body>
</html>